<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>goods</title>
    <link rel="stylesheet" href="/css/goods.css">
    <link rel="stylesheet" href="/libs/iconfont/iconfont.css">
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="stylesheet" href="/libs/swiper/css/swiper.min.css">
</head>

<body>
    <header></header>
    <div class="main">
        <div class="main-contain">
            <div class="contain-show">
                <div class="show-box fl">
                    <div class="box-small fl">
                        <div class="box-small-img">
                            <!-- 小图列表渲染 -->
                            <div class="small-list current">
                                <ul>
                                </ul>
                            </div>
                            <script type="text/html" id="small-img-template">
                                {{each data itme}}
                                <li><img src="{{itme.url}}" alt=""></li>{{/each}}
                            </script>


                            <div class="share-collect">
                                <a href="#" class="share">分享</a>
                                <a href="#" class="collect">收藏</a>
                            </div>
                        </div>
                    </div>

                    <!-- 放大镜大图渲染 -->
                    <div class="box-big fl">
                        <div class="box-big-pic">

                        </div>
                        <script type="text/html" id="big-img-template">
                            <img src="{{data.imageUrl}}" alt="">
                            <div class="mask"></div>
                        </script>


                        <div class="biggset-img">

                        </div>
                        <script type="text/html" id="biggest-img-template">
                            <img src="{{data.imageUrl}}" alt="">
                        </script>


                    </div>
                </div>
                <!-- 左边信息部分 -->
                <div class="show-info fr">
                    <div class="show-info-top">
                    </div>
                    <script type="text/html" id="info-top-template">
                        <h3 class="goods-name">{{data.share.title}}</h3>
                        <p class="goods-sn">款号：{{data.shop.fansNum}}</p>
                        <p class="goods-price">
                            ￥{{data.detail.price}}
                        </p>
                        {{if data.detail.coupon.couponText}}
                        <div class="promos">
                            <div class="promos-title fl">促销</div>
                            <div class="promos-content">
                                <a href="#">{{data.detail.coupon.couponText}}</a>
                                <a href="#">{{data.detail.couponValue}}</a>
                            </div>
                        </div>
                        {{/if}}
                    </script>
                    <div class="show-info-bottom">
                        <p class="goods-color"></p>
                        <div class="infos-panel">
                            <div class="infos-cell">
                                <div class="goods-size-cell half-cell">
                                    <span>尺码</span>
                                    <input type="text" placeholder="请选择尺码" disabled>
                                    <i class="icon-right">></i>
                                </div>
                                <i class="line"></i>
                                <div class="goods-num-cell half-cell">
                                    <span>数量</span>
                                    <input type="text" placeholder="请选择数量" disabled>
                                    <i class="icon-right">></i>
                                </div>

                            </div>
                            <div class="popup-panel size-panel active">
                                <h4 class="panel-title">请选择复合您的码数</h4>
                                <div class="panel-body size-list">
                                    <ul class="current">
                                    </ul>
                                    <!-- 尺寸 -->
                                    <script type="text/html" id="size-template">
                                        {{each data itme}}

                                        <li class="color-btn">
                                            <a>{{itme.tagCount}}</a>
                                        </li>
                                        {{/each}}
                                    </script>
                                </div>
                            </div>
                            <div class="popup-panel num-panel active">
                                <ul class="num-list">
                                </ul>
                                <!-- 数量 -->
                                <script type="text/html" id="num-template">
                                    {{each data itme}}
                                    <li>{{itme}}</li>
                                    {{/each}}
                                </script>
                            </div>
                        </div>
                        <div class="goods-btn">
                        </div>
                        <script type="text/html" id="goods-btn-template">
                            <!--  -->
                            <a class="add-btn fl">加入购物车</a>
                            <a class="buy-btn fr" href="/html/cart.html">立即购买</a>
                        </script>
                    </div>
                </div>
            </div>
            <div class="contain-tab tabs">
                <div class="tab-left fl">
                    <p>
                        <span>
                            商品细节
                        </span>
                    </p>
                    <i></i>
                </div>
                <div class="tab-left fr">

                </div>
            </div>
            <div class="contain-img">

            </div>
            <script type="text/html" id="contain-img-template">
                {{each data itme}}
                <img src="{{itme.image.url}}" alt=""> {{/each }}
            </script>
        </div>

    </div>
    <footer></footer>
    <div id="leader"></div>
</body>
<script src="/libs/require/require.min.js" data-main="/js/goods"></script>

</html>